<template>
    <div>
        <div id="body">
           <div class="body">
                <div class="v_head">
                    <ul class="pl-0">
                        <li>邮箱注册</li>
                    </ul>
                </div>
                <div id="get_input" class="get_input">
                    <div>
                        <img class="img_" src="http://127.0.0.1:3000/zhece4_03.png" />
                        <input class="get_name" type="text" v-model="uname" placeholder="请输入邮箱地址" :disabled="!isAgree"><span :class="unameClass" style="position:absolute;top:67px;right:14px"></span>
                    </div>
                    <div>
                        <img class="img_1" src="http://127.0.0.1:3000/zhece5_06.png" />
                        <input class="get_pwd1" type="password" v-model="upwd1" placeholder="请输入您的密码" :disabled="!isAgree"><span :class="upwdClass1" style="position:absolute;top:123px;right:14px"></span>
                    </div>
                    <div>
                        <img class="img_2" src="http://127.0.0.1:3000/zhece5_06.png" />
                        <input class="get_pwd2" type="password" v-model="upwd2" placeholder="请再次输入密码" :disabled="!isAgree"><span :class="upwdClass2"  style="position:absolute;top:180px;right:14px"></span>
                    </div>
                    <div>
                        <input class="get_agree mt-3" type="checkbox" name="agree" value="1" v-model="isAgree">
                        <span>我已看过并接受《<a href="http://www.idloves.com/article.php?id=93">注册协议</a>》</span>
                    </div>
                    <div>
                        <input type="submit" value="立即注册" :disabled="!isAgree" @click="register">
                    </div>
                    <div>
                        <a href="javascript:;">我已有账号，我要登录</a>
                        <a class="float_r" href="javascript:;">您忘记密码了吗？</a>
                    </div>
                    <div>
                        <span>使用第三方合作网站账号登录：</span>
                        <img src="http://127.0.0.1:3000/login_03.png" />
                    </div>
                </div>
            </div> 
        </div>
    </div>
</template>
<script>
    el:"#get_input";
    export default {
    data(){
        return{
            uname:"",
            upwd1:"" ,
            upwd2:"",
           isAgree:true,
           unameClass:{
                vali_success:false,
                vali_fail:false
           },
            upwdClass1:{
                vali_success:false,
                vali_fail:false
           },
            upwdClass2:{
                vali_success:false,
                vali_fail:false
           }
        }
    },
    methods:{
        register(){
            //获取用户输入的用户，密码信息
            var u=this.uname;
            var p=this.upwd1;
            //用户名验证：邮箱
           var reg1=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
           //密码强度正则，最少6位
           var reg2=/^[a-zA-Z0-9]{6,}$/;
           //4.用户验证失败  提示短消息
            if(!reg1.test(u)){
                alert("用户名格式不正确");
                return;//失败停止执行
            }
            //5.密码验证失败  提示短消息
            if(!reg2.test(p)){
                alert("密码格式不正确");
                return;//失败停止执行
            }
            //6.发送ajax 请求 axios
            var obj=this.$qs.stringify({
                uname:u,
                upwd:p
            });
            //`uname=${u}&upwd=${p}`;
            // console.log(obj);
             this.axios.post(
                "/register", obj
            ).then(result=>{
                if(result.data.code==1){
                    this.$toast({message:"注册成功"});
                    this.$router.push("/login");
                }
			})
        }
    },
    watch:{
        uname(){
            var reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if(reg.test(this.uname)==true){
                this.unameClass={
                    vali_fail:false,
                    vali_success:true
                }
            }else{
                this.unameClass={
                    vali_fail:true,
                    vali_success:false
                }
            }
        },
        upwd1(){
            var reg=/^[a-zA-Z0-9]{6,}$/;
            if(reg.test(this.upwd1)==true){
                this.upwdClass1={
                    vali_fail:false,
                    vali_success:true
                }
            }else{
                this.upwdClass1={
                    vali_fail:true,
                    vali_success:false
                }
            }
        },
        upwd2(){
            var reg=/^[a-zA-Z0-9]{6,}$/;
            if(reg.test(this.upwd2)==true&&this.upwd1==this.upwd2){
                this.upwdClass2={
                    vali_fail:false,
                    vali_success:true
                }
            }else{
                this.upwdClass2={
                    vali_fail:true,
                    vali_success:false
                }
            }
        }
    }
}

//测试数据
//liuxu@loves.com

</script>
<style scoped>
/* .get_input div span #dui,.get_input div span #cuo{
    display: none;
} */
/* 输入各项注册值验证预案样式 */ 
.vali_fail{
    display: inline-block;
    width:20px;height:20px;
    background:url(http://127.0.0.1:3000/cuo.png) no-repeat;
    background-size:20px 20px ;
}
.vali_success{
    display: inline-block;
    background:url(http://127.0.0.1:3000/dui.png) no-repeat;
    width:20px;height:20px;
        background-size:20px 20px ;
}

 /* 主页面 */
#body{
    min-height:580px;width:100% ;
    background: url(http://127.0.0.1:3000/zhuce_02.jpg) no-repeat;
    position: relative;
    margin-bottom:66px;
}
.body{
    width:410px;height:466px;
    background:url(http://127.0.0.1:3000/zhuce-bg_03.png);
    border-radius:8px;
    position: absolute;
    top:12%;right:24%;
}
.v_head ul li{
    list-style: none;
    background: url(http://127.0.0.1:3000/zhuce-bg1.png) 15px center #22abcc no-repeat;
    border-radius: 8px 8px 0px 0px;
    padding:10px 0px 10px 50px;
    color:#fff;
    font-size:18px;
}

.get_input{
    width:410px;
    padding-left:40px;
    display: block;
    list-style: none;
}
.get_input div .get_name,.get_input div .get_pwd1,.get_input div .get_pwd2,
.get_input div .get_verify{
    width:330px;height:45px; 
    padding-left:50px;
    border:1px solid #d8d8d8;
    border-radius: 8px;
    color:#999;
    font-size:15px;
    display: block;
    margin: 10px 0px auto;
}
.get_input div .get_verify{
    width:200px;
}
/* .get_input ul li .get_name{
    background: url(http://127.0.0.1:3000/zhece4_03.png) no-repeat left center;
} */
.get_input div .img_{
    position: absolute;
    top:15%;left:14%;
}
.get_input div .img_1{
    position: absolute;
    top:27%;left:14%;
}
.get_input div .img_2{
    position: absolute;
    top:39%;left:14%;
}
.get_input :nth-child(4){
    color:#999;
    font-size:14px;
    margin-bottom:25px;
}
.get_input :nth-child(4) a{
    color:#22abcc;
}
.get_input :nth-child(5) input{
    width:330px;height:40px;
    background: #22abcc;
    border: 0;
    color:#fff;
    font-size:15px;
}
.get_input :nth-child(6) a{
    color:#22abcc;
    font-size:12px;
    text-decoration: none;
}
.get_input div .float_r{
    /* float: right; */
    margin-left:32%; 
}
.get_input :last-child span{
    color:#999;
    font-size:14px;
    margin-top:20px; 
}
</style>

